<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>账号余额 - 个人中心</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/userCenter.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/common.css?v=20170316184648}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/index.css?v=20170316184648}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
</head>
<body>
<div id="app">
    <div class="app-container" data-reactid=".0">
        <div class="layout" data-reactid=".0.0">
            <div class="hContent headerInfo">
                <header th:replace="~{commons::#top}"/>
                <div class="bottom_bar" data-reactid=".0.0.0.1">
                    <span class="before" data-reactid=".0.0.0.1.0"></span>
                    <span class="after" data-reactid=".0.0.0.1.1"></span>
                </div>
            </div>
            <div class="icontainer clearfix" data-reactid=".0.0.1">
                <div class="left-menu" data-reactid=".0.0.1.0">
                    <dl data-reactid=".0.0.1.0.0">
                        <dt data-reactid=".0.0.1.0.0.0">
                            <a th:href="@{/order/list}" data-reactid=".0.0.1.0.0.0.0"><i class="icon-my-order"
                                                                                         data-reactid=".0.0.1.0.0.0.0.0"><img
                                    th:src="@{/images/icon-my-order.png}" data-reactid=".0.0.1.0.0.0.0.0.0"/></i><span
                                    data-reactid=".0.0.1.0.0.0.0.1">我的订单</span></a>
                        </dt>
                    </dl>
                    <dl data-reactid=".0.0.1.0.1">
                        <dt data-reactid=".0.0.1.0.1.0">
                            <div data-reactid=".0.0.1.0.1.0.0">
                                <i class="icon-my-account" data-reactid=".0.0.1.0.1.0.0.0"><img
                                        th:src="@{/images/icon-my-account.png}" data-reactid=".0.0.1.0.1.0.0.0.0"/></i>
                                <span data-reactid=".0.0.1.0.1.0.0.1">我的账户</span>
                            </div>
                        </dt>
                        <dd data-reactid=".0.0.1.0.1.1">
                            <a class="active" th:href="@{/user/userAccount}" data-reactid=".0.0.1.0.1.1.0">账户余额</a>
                        </dd>
                        <dd data-reactid=".0.0.1.0.1.2">
                            <a class="" th:href="@{/user/userPay}" data-reactid=".0.0.1.0.1.2.0">充值</a>
                        </dd>
                        <dd data-reactid=".0.0.1.0.1.3">
                            <a class="" th:href="@{/user/discount}" data-reactid=".0.0.1.0.1.3.0">优惠券</a>
                        </dd>
                        <dd data-reactid=".0.0.1.0.1.4">
                            <a class="" th:href="@{/user/usualInfo}" data-reactid=".0.0.1.0.1.5.0">常用信息</a>
                        </dd>
                        <dd data-reactid=".0.0.1.0.1.5">
                            <a class="" th:href="@{/user/initcost}" data-reactid=".0.0.1.0.1.5.0">消费统计</a>
                        </dd>
                    </dl>
                    <dl data-reactid=".0.0.1.0.3">
                        <dt data-reactid=".0.0.1.0.3.0">
                            <div data-reactid=".0.0.1.0.3.0.0">
                                <i class="icon-settings" data-reactid=".0.0.1.0.3.0.0.0"><img
                                        th:src="@{/images/icon-settings.png}" data-reactid=".0.0.1.0.3.0.0.0.0"/></i>
                                <span data-reactid=".0.0.1.0.3.0.0.1">设置</span>
                            </div>
                        </dt>
                        <dd data-reactid=".0.0.1.0.3.1">
                            <a class="" th:href="@{/user/updatepwd}" data-reactid=".0.0.1.0.3.1.0">修改密码</a>
                        </dd>
                    </dl>
                </div>

                <div class="right-container" data-reactid=".0.0.1.1">
                    <div class="my-account" data-reactid=".0.0.1.1.0">
                        <div class="my-balance" data-reactid=".0.0.1.1.0.0">
                            <span data-reactid=".0.0.1.1.0.0.0">您当前的闪送余额：</span>
                            <span class="my-balance-hl" data-reactid=".0.0.1.1.0.0.1">
                                <span data-reactid=".0.0.1.1.0.0.1.0"><th:block th:text="${money}"></th:block></span>
                                <span data-reactid=".0.0.1.1.0.0.1.1">元</span>
                            </span>
                            <a class="btn btn-warning my-balance-recharge" th:href="@{/user/userPay}"
                               data-reactid=".0.0.1.1.0.0.2">充值</a>
                        </div>
                        <div class="query-type" data-reactid=".0.0.1.1.0.1">
                            <a class="link tab-btn active" th:href="@{/user/userAccount}" data-reactid=".0.0.1.1.0.1.0">消费明细</a>
                            <a class="link tab-btn" th:href="@{/user/rechargeRecord}" data-reactid=".0.0.1.1.0.1.1">充值（/退款）记录</a>
                            <span style="padding-left:460px;"/>
                            <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" id="export">
                                <i class="layui-icon layui-icon-export"></i> 导出Excel
                            </button>
                        </div>
                        <table id="payList" lay-filter="payList" class="layui-hide"></table>
                    </div>
                    <!--显示数据条数-->
                    <!--<div id="totalCount" align="right"></div>-->
                </div>
            </div>

            <footer th:replace="~{commons::#footer}"/>
        </div>
    </div>
</div>
<!--弹出详细信息页面-->
<form class="layui-form layui-form-pane1" id="detailForm" name="detailForm"  lay-filter="detailForm" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">订单号</label>
        <div class="layui-input-inline">
            <input type="text" name="no" id="no" readonly  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">下单时间</label>
        <div class="layui-input-inline">
            <input type="text" name="orderTime" id="orderTime" readonly autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">接单时间</label>
        <div class="layui-input-inline">
            <input type="text" name="acceptTime" id="acceptTime" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">送达时间</label>
        <div class="layui-input-inline">
            <input type="text" name="getTime" id="getTime" readonly autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">寄件人信息</label>
        <div class="layui-input-inline">
            <input type="text" name="sendInfo" id="sendInfo" autocomplete="off" readonly class="layui-input"  style="width: 350px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">收件人信息</label>
        <div class="layui-input-inline">
            <input type="text" name="recInfo" id="recInfo" autocomplete="off" readonly class="layui-input"  style="width: 350px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">总重(kg)</label>
        <div class="layui-input-inline">
            <input type="text" name="weight" id="weight" readonly autocomplete="off" class="layui-input" style="width: 50px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">距离(km)</label>
        <div class="layui-input-inline">
            <input type="text" name="distance" id="distance" readonly autocomplete="off" class="layui-input" style="width: 50px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">总金额(元)</label>
        <div class="layui-input-inline">
            <input type="text" name="totalMoney" id="totalMoney" readonly autocomplete="off" class="layui-input" style="width: 50px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">折扣</label>
        <div class="layui-input-inline">
            <input type="text" name="discount" id="discount" readonly autocomplete="off" class="layui-input" style="width: 50px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">实付金额(元)</label>
        <div class="layui-input-inline">
            <input type="text" name="realMoney" id="realMoney" readonly autocomplete="off" class="layui-input" style="width: 50px;">
        </div>
    </div>
</form>
<script src="/layui/layui.js"></script>
<script type="text/html" id="detail">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
</script>
<script>
    layui.use(['laypage', 'layer', 'table'], function () {
        var laypage = layui.laypage,
            layer = layui.layer,
            table = layui.table;

        var tab = table.render({
            elem: '#payList'
            , height: 460
            , url: '/user/payList' //数据接口
            ,limit: 8
            ,limits: [8, 16, 24]
            , totalRow: true
            , cols: [
                [
                    {field: 'zz', title: '序号', width: 65, align: 'center', type: 'numbers'}
                    , {field: 'orderTime', title: '时间', sort: true, width: 240, align: 'center'}
                    , {field: 'realMoney', title: '金额（元）', sort: true, width: 120, align: 'center'}
                    , {field: 'no', title: '订单号', sort: true, width: 300, align: 'center'}
                    , {title: '操作', width: 100, align: 'center',toolbar: '#detail'}
                ]
            ]
            , page: true //开启分页
        });
        table.on('tool(payList)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                orderInfo(data,obj);
            }
        });
        function orderInfo(data,obj) {
            console.log(obj);
            $("#no").val(data.no);
            $("#orderTime").val(data.orderTime);
            $("#acceptTime").val(data.acceptTime);
            $("#getTime").val(data.getTime);
            $("#sendInfo").val(data.sendInfo);
            $("#recInfo").val(data.recInfo);
            $("#weight").val(data.weight);
            $("#distance").val(data.distance);
            $("#totalMoney").val(data.totalMoney);
            $("#discount").val(Math.round(10*(data.realMoney)/(data.totalMoney))/10);
            $("#realMoney").val(data.realMoney);
            layer.open({
                title: "订单详情",
                type: 1,
                resize:true,
                maxmin: true,
                anim: 5,
                shade: 0.3,
                area: ['500px', '650px'],
                content: $("#detailForm"),
            })
        };
        /*导出excel表格(不是分页导出所以不能写在table中)*/
        $("#export").click(function(){
            $.ajax({
                url: '/user/allPayList',
                type: 'get',
                dataType: 'json'
            })
                .done(function (data) {
                    var someData = [];
                    data.forEach(function(item){
                        someData.push({orderTime: item.orderTime, realMoney: item.realMoney, no: item.no})
                    })
                    var field = ['时间','金额（元）','订单号'];
                    table.exportFile(field,someData, 'xls',"消费明细表");
                })
        });
    });

</script>
</body>
</html>